<template>
    <el-form label-width="4.15%" style="margin: auto;">
        <el-form-item label="线索跟踪记录" prop="noteContent">
            <el-input
                v-model="clueRemark.noteContent"
                rows="3"
                type="textarea"
                placeholder="请输入活动备注记录"
                style="width: 20%;"
            />
        </el-form-item>
        <el-form-item label="跟踪方式" prop="noteWay">
            <el-select
                v-model="clueRemark.noteWay"
                placeholder="请选择跟踪方式"
                clearable
                style="width: 20%;"
                @click="loadDicData('noteWay')">
                <el-option
                    v-for="item in noteWayOptions"
                    :key="item.id"
                    :label="item.typeValue"
                    :value="item.id"/>
            </el-select>
        </el-form-item>
    </el-form>
    <el-button type="primary" @click="clueRemarkSubmit()">提 交</el-button>
    <el-button type="primary" plain @click="goBack">返 回</el-button>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {doGet, doPost} from "../http/httpRequest.js";
import {showMessage} from "../util/message.js";
import {useRoute, useRouter} from "vue-router";

// 线索备注信息对象，用于存储当前编辑的备注详情
let clueRemark = ref({});

// 联系方式选项数组，用于存储备注方式的下拉选择项
let noteWayOptions = ref([]);

// 获取当前路由信息和路由导航实例
const route = useRoute();
const router = useRouter();

// 组件挂载完成后执行初始化操作
onMounted(() => {
    // 获取路由参数中的活动备注ID
    let clueRemarkId = route.params.clueRemarkId;
    // 加载活动备注详情数据
    loadClueRemark(clueRemarkId);
    // 加载联系方式选项数据
    loadDicData('noteWay');
})

/**
 * 加载字典数据方法
 * @param {string} typeCode - 字典类型编码，这里用于获取备注方式选项
 */
const loadDicData = typeCode => {
    doGet('api/dic/' + typeCode, {}).then(resp => {
        if (resp.data.code == 200) {
            // 将获取到的字典数据赋值给联系方式选项数组
            noteWayOptions.value = resp.data.info;
        } else {
            // 字典数据加载失败时显示错误提示
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 加载线索备注详情方法
 * @param {string} clueRemarkId - 线索备注ID，用于获取特定备注的详细信息
 */
const loadClueRemark = clueRemarkId => {
    // 调用GET接口获取备注详情
    doGet('/api/clue/remark/detail/' + clueRemarkId).then(resp => {
        if (resp.data.code == 200) {
            // 接口调用成功，更新备注数据
            clueRemark.value = resp.data.info;
        } else {
            // 接口调用失败，显示错误提示
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 线索备注提交方法
 * 用于保存编辑后的备注信息到服务器
 */
const clueRemarkSubmit = () => {
    let clueRemarkId = route.params.clueRemarkId;
    doPost('/api/clue/remark/edit', {
        clueRemarkId: clueRemarkId,
        noteContent: clueRemark.value.noteContent,
        noteWay: clueRemark.value.noteWay
    }).then(resp => {
        if (resp.data.code == 200) {
            showMessage(resp.data.msg, 'success'); // 提交成功提示
            router.back(); // 返回上一页
        } else {
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 返回上一页函数
 * 通过路由实例的back方法实现页面回退
 */
const goBack = () => {
    router.back();
}
</script>

<style scoped>
</style>